import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class ScreenPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _ScreenPageState();
  }
}

class _ScreenPageState extends State<ScreenPage> {
  @override
  Widget build(BuildContext context) {
    ScreenUtil.init(
        BoxConstraints(
          minWidth: 720,
          minHeight: 1280,
          maxWidth: 1440,
          maxHeight: 2560,
        ),
        designSize: Size(750, 1334));
    return Scaffold(
      appBar: AppBar(
        title: Text('screen适配'),
      ),
      body: _body(),
    );
  }

  Widget _body() {
    return Column(
      children: [
        Row(
          children: [
            Container(
              color: Colors.greenAccent,
              width: ScreenUtil().setWidth(100),
              height: ScreenUtil().setHeight(92.5),
              child: Text(
                '我的宽度:${ScreenUtil().setWidth(100)}dp \n'
                '我的高度:${ScreenUtil().setHeight(92.5)}dp',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: ScreenUtil().setSp(14),
                ),
              ),
            ),
            Container(
              color: Colors.redAccent,
              width: ScreenUtil().setWidth(87),
              height: ScreenUtil().setHeight(112),
              child: Text(
                '我的宽度:${ScreenUtil().setWidth(87)}dp \n'
                '我的高度:${ScreenUtil().setHeight(112)}dp',
                style: TextStyle(
                    color: Colors.white, fontSize: ScreenUtil().setSp(14)),
              ),
            ),
          ],
        ),
        Row(
          children: [
            Container(
              child: Text(
                '宽度136px',
                style: TextStyle(fontSize: 16.sp),
              ),
              alignment: Alignment.center,
              color: Colors.lightBlue[100],
              width: 50.w,
              height: 70.h,
              margin: EdgeInsets.only(left: ScreenUtil().setWidth(5)),
            ),
            Container(
              child: Text('宽度414px'),
              alignment: Alignment.center,
              color: Colors.purpleAccent[100],
              width: ScreenUtil().setWidth(50),
              height: ScreenUtil().setHeight(70),
            ),
            Container(
              child: Text(
                '宽度136px',
                style: TextStyle(fontSize: ScreenUtil().setSp(14)),
              ),
              alignment: Alignment.center,
              color: Colors.lightBlue[100],
              width: ScreenUtil().setWidth(50),
              height: ScreenUtil().setHeight(70),
              margin: EdgeInsets.only(right: ScreenUtil().setWidth(5)),
            ),
          ],
        ),
        Text('设备宽度:${ScreenUtil().screenWidth}px'),
        Text('设备高度:${ScreenUtil().screenHeight}px'),
        Text('设备的像素密度:${ScreenUtil().pixelRatio}'),
        Text('底部安全区距离:${ScreenUtil().bottomBarHeight}dp'),
        Text('状态栏高度:${ScreenUtil().statusBarHeight}dp'),
        Text(
          '实际宽度的dp与设计稿px的比例:${ScreenUtil().scaleWidth}',
          textAlign: TextAlign.center,
        ),
        Text(
          '实际高度的dp与设计稿px的比例:${ScreenUtil().scaleHeight}',
          textAlign: TextAlign.center,
        ),
        SizedBox(
          height: ScreenUtil().setHeight(20),
        ),
        Text('系统的字体缩放比例:${ScreenUtil().textScaleFactor}'),
        Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Text('我的文字大小在设计稿上是8px，不会随着系统的文字缩放比例变化',
                style: TextStyle(
                  color: Colors.black,
                  fontSize: ScreenUtil().setSp(8),
                )),
            Text('我的文字大小在设计稿上是8px，会随着系统的文字缩放比例变化',
                style: TextStyle(
                    color: Colors.black,
                    fontSize:
                        ScreenUtil().setSp(8, allowFontScalingSelf: true))),
          ],
        ),
      ],
    );
  }
}
